<template>
<a-card :bordered="false">
  <div class="table-page-search-wrapper">
    <a-form layout="inline" @keyup.enter.native="searchQuery">
      <a-row :gutter="24">
        <a-col :xl="10" :lg="11" :md="12" :sm="24">
            <a-form-item label="报表日期">
              <a-range-picker @change="onChange" v-model="timeValue"/>
            </a-form-item>
        </a-col>
        <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
  <div class="table-operator">
    <a-button @click="addEpa" type="primary" icon="plus">新增</a-button>
  </div>
  <div>
    <a-spin :spinning='downLoading' tip=" 正在下载数据，请耐心等待">
    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      bordered
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      @change="handleTableChange"
      :loading="loading">
      <template slot="Participants" slot-scope="text,record">
            <span>
              {{record.reportYear}}年第{{record.reportPeriod}}期
            </span>
      </template>
      <span slot="action" slot-scope="text,record">
        <a @click="preview(record)">预览</a>
        <a @click="upload(record)" style="margin-left: 10px">下载</a>
        <a @click="deleteStatistics(record)" style="margin-left: 10px">删除</a>
      </span>

    </a-table>
    </a-spin>
  </div>
  <Preview ref='preview'></Preview>
</a-card>
</template>


<script>
import EpaWeekly from "../../../myService/EpaWeekly";
import Preview from '../../../views/epa/epa-weekly/Modal/Preview'

const docx = require("docx-preview");
window.JSZip = require("jszip");
export default {
name: "epaHome",
  components: {
    EpaWeekly,
    Preview,
  },
  data(){
    return{
      ipagination:{
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      timeValue:undefined,
      dataSource: [],
      queryParam:{
        beginDate:null,
        endDate:null,
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align:"center",
          customRender: (text, row, index) => <span>{this.ipagination.pageSize * (this.ipagination.current - 1) + index + 1}</span>
        },
        {
          title:'开始时间',
          align:"center",
          dataIndex: 'startTime',
          customRender:function (text) {
            return !text?"":(text.length>10?text.substr(0,10):text)
          }
        },
        {
          title:'结束时间',
          align:"center",
          dataIndex: 'endTime',
          customRender:function (text) {
            return !text?"":(text.length>10?text.substr(0,10):text)
          }
        },
        {
          title:'年份-期',
          align:"center",
          dataIndex: 'reportYear',
          scopedSlots: { customRender: 'Participants' }
        },
        {
          title:'期',
          align:"center",
          dataIndex: 'reportPeriod'
        },
        {
          title:'创建人',
          align:"center",
          dataIndex: 'createBy'
        },
        {
          title:'创建时间',
          align:"center",
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align:"center",
          fixed:"right",
          width:147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      loading:false,
      downLoading:false
    }
  },
  created() {
    this.getDataSourceList();
  },
  methods:{
    onChange(date, dateString) {
      this.queryParam.beginDate=dateString[0].replace(/-/g, "")
      this.queryParam.endDate=dateString[1].replace(/-/g, "")
      console.log(this.queryParam)
    },
    getDataSourceList(){
      this.loading = true;
      this.dataSource=[]
      this.ipagination.total=0
      this.queryParam.pageSize=this.ipagination.pageSize
      this.queryParam.currentPage=this.ipagination.current
      EpaWeekly.getList(this.queryParam).then((res)=>{
        console.log(res.result)
        this.dataSource=res.result.records
        this.ipagination.total=res.result.total
        console.log(this.dataSource)
      }).finally(
        this.loading = false
      )
    },
    searchQuery(){
      console.log(this.queryParam)
      this.loading = true;
      this.dataSource=[]
      this.ipagination.total=0
      this.queryParam.pageSize=this.ipagination.pageSize
      this.queryParam.currentPage=this.ipagination.current
      EpaWeekly.getListSearch(this.queryParam).then((res)=>{
        this.dataSource=res.result.records
        this.ipagination.total=res.result.total
      }).finally(
        this.loading = false
      )
    },
    searchReset(){
      this.timeValue=null,
      this.queryParam.beginDate=null,
      this.queryParam.endDate=null,
      this.getDataSourceList();
    },
    addEpa(){
      this.$router.push("/epa/epa-weekly-add")
    },
    handleTableChange(pagination){
      console.log(pagination)
      this.ipagination.current=pagination.current
      this.ipagination.pageSize=pagination.pageSize
      console.log(this.ipagination)
      this.getDataSourceList();
    },
    upload(record){
      console.log(record.id)
      this.downLoading=true;
      EpaWeekly.createWord({id:record.id}).finally(
        ()=>{
          this.downLoading=false;
        }
      )
    },
    preview(record){
      this.$refs.preview.open(record);
    },
    deleteStatistics(record){
      EpaWeekly.deleteStatistics({id:record.id}).then((res)=>{
        console.log(res)
        if(res.result==1){
          this.$message.success("删除成功")
        }
      })
      this.getDataSourceList()
    }
  }
}
</script>

<style scoped>

</style>